<script lang="ts" setup name="goods">
	import GoodsImage from './components/goods-image.vue'
	import GoodsSale from './components/goods-sale.vue'
	import GoodsName from './components/goods-name.vue'
	import GoodsSku from './components/goods-sku.vue'
	import GoodsDetail from './components/goods-detail.vue'
	import GoodsHot from './components/goods-hot.vue'
	import useStore from '@/store'
	import { storeToRefs } from 'pinia'
	import { watchEffect, ref, onUnmounted } from 'vue'
	import { useRoute } from 'vue-router'
	import Message from '@/components/message'
	import { CartItem } from '@/types/cart'

	const { goods, cart } = useStore()
	const route = useRoute()

	watchEffect(() => {
		const id = route.params.id as string
		// 监听的时候因为 商品页跳转回首页时, id会变为undefined, 引发接口报错
		if (route.fullPath === `/goods/${id}`) {
			// 获取商品信息
			goods.getGoodsInfo(id)
		}
	})
	const { info } = storeToRefs(goods)

	let currentSkuId = ''
	const changeSku = (skuId: string) => {
		currentSkuId = skuId
		const sku = info.value.skus.find((item) => item.id === skuId)
		if (sku) {
			info.value.price = sku.price
			info.value.oldPrice = sku.oldPrice
			info.value.inventory = sku.inventory
		}
	}

	const count = ref(1)
	// 组件虽然销毁了，但是pinia还有上一次的商品数据，当goods组件销毁的时候，把pinia的数据重置即可
	onUnmounted(() => {
		goods.$reset()
	})

	const addCart = async () => {
		// 判断是否是完整的sku
		if (!currentSkuId) {
			return Message.error('请选择完整信息')
		}
		// 当前需要添加的商品的sku
		const sku = info.value.skus.find((item) => item.id === currentSkuId)
		const attrsText = sku?.specs.map((item) => item.name + ':' + item.valueName).join(' ')
		await cart.addCart({
			id: info.value.id,
			name: info.value.name,
			picture: info.value.mainPictures[0],
			price: info.value.price,
			skuId: currentSkuId,
			count: count.value,
			attrsText: attrsText,
			selected: true,
			nowPrice: info.value.price,
			stock: info.value.inventory,
			isEffective: true,
		} as CartItem)
		Message.success('加入购物车成功')
	}
</script>
<template>
	<div class="xtx-goods-page" v-if="info.categories">
		<div class="container">
			<!-- 面包屑 -->
			<XtxBread>
				<XtxBreadItem to="/">首页</XtxBreadItem>
				<XtxBreadItem :to="`/category/${info.categories[1].id}`">{{
					info.categories[1].name
				}}</XtxBreadItem>
				<XtxBreadItem :to="`/category/sub/${info.categories[0].id}`">{{
					info.categories[0].name
				}}</XtxBreadItem>
				<XtxBreadItem>{{ info.name }}</XtxBreadItem>
			</XtxBread>
			<!-- 商品信息 -->
			<div class="goods-info">
				<div class="media">
					<!-- 图片预览区 -->
					<GoodsImage :images="info.mainPictures" />
					<GoodsSale></GoodsSale>
				</div>
				<div class="spec">
					<!-- 名字区组件 -->
					<GoodsName :goods="info"></GoodsName>
					<!-- 规格组件 -->
					<GoodsSku :goods="info" skuId="currentSkuId" @changeSku="changeSku"></GoodsSku>
					<!-- 数量选择numBox组件 -->
					<XtxNumBox v-model="count" :max="info.inventory" showLabel></XtxNumBox>
					<!-- 加入购物车 -->
					<XtxButton style="margin-top: 20px" type="primary" @click="addCart">加入购物车</XtxButton>
				</div>
			</div>
			<!-- 商品详情 -->
			<div class="goods-footer">
				<div class="goods-article">
					<!-- 商品+评价 -->
					<div class="goods-tabs">
						<GoodsDetail :goods="info"></GoodsDetail>
					</div>
				</div>
				<!-- 24热榜+专题推荐 -->
				<div class="goods-aside">
					<GoodsHot :type="1"></GoodsHot>
					<GoodsHot :type="2"></GoodsHot>
					<GoodsHot :type="3"></GoodsHot>
				</div>
			</div>
		</div>
	</div>
</template>

<style scoped lang="less">
	.goods-info {
		min-height: 600px;
		background: #fff;
		display: flex;
		.media {
			width: 580px;
			height: 600px;
			padding: 30px 50px;
		}
		.spec {
			flex: 1;
			padding: 30px 30px 30px 0;
		}
	}
	.goods-footer {
		display: flex;
		margin-top: 20px;
		.goods-article {
			width: 940px;
			margin-right: 20px;
		}
		.goods-aside {
			width: 280px;
			min-height: 1000px;
		}
	}
</style>
